<template>
  <div class="targetContainer">
    <div class="headerContainer">
      <FormQuery
        ref="formQuery"
        :initial-form-data="initialFormData"
        @query="handleQuery"
        @reset="handleReset"
      />
    </div>
    <div class="contentContainer">
      <div class="left_content">
        <CesiumConViewer ref="cesiumViewer" :cesium-data="cesiumData" />
      </div>
      <div class="right_content">
        <div class="right_content_top">
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in optionsBar1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="changeOption1(item)"
            >
            </el-option>
          </el-select>
          <bar-chart :data="barData1" :title="titleBar1" />
        </div>
        <div class="right_content_bottom">
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in optionsBar2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="changeOption2(item)"
            >
            </el-option>
          </el-select>
          <bar-chart :data="barData2" :title="titleBar2" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from "@/components/BarChart/index.vue";
import FormQuery from "@/components/FormQuery/index.vue";
import CesiumConViewer from "@/components/CesiumConViewer/index.vue";
import {
  getQueryHisSituation,
  getStatByHeight,
  getStatBySpeed,
  getStatBySnr,
  getStatByActiveTime,
  getStatByActiveFreq,
  getStatByBatchNum,
  getStatByRcs,
  getStatBySize,
} from "@/api/datarecord/index.js";

export default {
  name: "TargetCharacteristicStatistics",
  components: { BarChart, FormQuery, CesiumConViewer },
  data() {
    return {
      optionsBar1Map: new Map([
        ["hight", getStatByHeight],
        ["speed", getStatBySpeed],
        ["snr", getStatBySnr],
        ["time", getStatByActiveTime],
        ["frequence", getStatByActiveFreq],
        ["vehicles", getStatByBatchNum],
      ]),
      optionsBar2Map: new Map([
        ["rcs", getStatByRcs],
        ["size", getStatBySize],
      ]),
      cesiumData: {},
      optionsBar1: [
        {
          value: "hight",
          label: "高度",
        },
        {
          value: "speed",
          label: "速度",
        },
        {
          value: "snr",
          label: "信噪比",
        },
        {
          value: "time",
          label: "活动时间",
        },
        {
          value: "frequence",
          label: "频次",
        },
        {
          value: "vehicles",
          label: "架次",
        },
      ],
      optionsBar2: [
        {
          value: "rcs",
          label: "RCS",
        },
        {
          value: "size",
          label: "长度",
        },
      ],
      value1: "hight",
      value2: "rcs",
      barData1: [],
      barData2: [],
      initialFormData: {
        dateRange: [],
        targetType: "",
        batchNo: "",
      },
      queryResult: null,
      titleBar1: "高度",
      titleBar2: "RCS",
    };
  },
  mounted() {
    this.getBarDataToChild1();
    this.getBarDataToChild2();
  },
  methods: {
    getBarDataToChild1() {
      const apiMethod = this.optionsBar1Map.get(this.value1);
      if (!apiMethod) return;
      const params = { ...this.queryResult };
      apiMethod(params)
        .then((res) => {
          if (res.code === 200) {
            this.barData1 = res.data;
          } else {
            this.$message.error(res.msg || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("API Error:", error);
          this.$message.error("请求数据失败");
        })
        .finally(() => {});
    },
    getBarDataToChild2() {
      const apiMethod = this.optionsBar2Map.get(this.value2);
      if (!apiMethod) return;
      const params = { ...this.queryResult };
      apiMethod(params)
        .then((res) => {
          if (res.code === 200) {
            this.barData2 = res.data;
          } else {
            this.$message.error(res.msg || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("API Error:", error);
          this.$message.error("请求数据失败");
        })
        .finally(() => {});
    },
    changeOption1(value) {
      this.titleBar1 = value.label;
      this.getBarDataToChild1();
    },
    changeOption2(value) {
      this.titleBar2 = value.label;
      this.getBarDataToChild2();
    },
    async getHistoryHandle() {
      try {
        const res = await getQueryHisSituation({ ...this.queryResult });
        if (res.code == 200) {
          this.$message.success("查询成功！");
          this.cesiumData = res.data;
        }
      } catch (error) {}
    },
    // 处理查询事件
    handleQuery(formData) {
      this.queryResult = {
        ...formData,
      };
      this.getHistoryHandle();
    },

    // 处理重置事件
    handleReset() {
      this.queryResult = null;
      this.$message.info("已清除查询条件");
      this.$refs.cesiumViewer.clearTracks();
    },

    // 清除表单（外部调用）
    clearForm() {
      this.$refs.formQuery.resetForm();
    },
  },
};
</script>
<style lang="scss"  scored>
.targetContainer {
  height: 100vh;
  background-color: #0e1832;
  padding: 20px;
  .headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(13, 138, 188, 0.3);
    background-color: #0f3350;
    border-radius: 8px;
    height: 60px;
    color: #fff;
  }
  .contentContainer {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 100px);

    .left_content {
      width: calc(100% - 600px);
    }
    .right_content {
      width: 580px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .right_content_top {
        height: 350px;
      }
    }
  }
}
</style>

